<template>
  <div class="e-radio">
    <el-radio-group v-model="radioVal" @change="change">
      <el-radio-button
        v-for="value in tabList"
        :label="value"
        :key="value"
      >
        {{value}}
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'ElRadio',
  props: {
    tabList: {
      type: Array
    }
  },
  data () {
    return {
      radioVal: this.tabList[0]
    }
  },
  methods: {
    change (value) {
      this.$emit('getRadio', value)
    }
  }
}
</script>

<style>
.e-radio {
  max-height: 116px;
  overflow-x: hidden;
}
.e-radio .el-radio-button {
  margin: 20px 20px 0 0
}
.e-radio .el-radio-button__inner {
  border-radius: 3px!important;
  border: none!important;
  background: none;
  box-shadow: 0 0 2px #4c95ff inset;
  color: #4dd5ff;
  padding: 10px 14px;
}
.e-radio .el-radio-button:first-child .el-radio-button__inner {
  box-shadow: 0 0 2px #4c95ff inset!important;
}
.e-radio .el-radio-button.is-active .el-radio-button__inner {
  position: relative;
  background: linear-gradient(to right, #18f8c4 0%, #1847c4 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.e-radio .el-radio-button.is-active .el-radio-button__inner:before {
  position: absolute;
  top: 3px;
  right: 3px;
  content: '';
  width: 5px;
  height: 5px;
  border:solid #b5ffff;
  border-width: 1px 1px 0 0;
  border-top-right-radius: 2px;
}
</style>
